<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>示例页面</title>
    <link rel="stylesheet" type="text/css" href="../lib/swiper/css/swiper.min.css" />
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/global.css">
    <script src="../lib/autoSize.js"></script>
    <style>
        #map {width: 100%;height:calc(100vh - 2.2rem);overflow: hidden;}
        div.info-middle {
            font-size: 12px;
            line-height: 20px;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .amap-marker-label{
            border: none;
        }

        footer{
            position: fixed;
            bottom: 0;
            height: 6.5rem;
            background-color: white;
            width: 100%;
        }
        footer h1{
            height: 2rem;
            line-height: 2rem;
            margin-left: 0.75rem;
        }
        footer p{
            height: 2rem;
            line-height: 1rem;
            font-size: 0.65rem;
            margin: 0 0.75rem;
        }
        footer #go{
            box-shadow: #999999 0 0 2px;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        footer #go button{
            background: url("../images/button.png") center/cover;
            width:14.5rem ;
            height: 1.75rem;
            color: white;
            margin-top: 0.4rem;
            font-size: 0.8rem;
        }

        footer img{
            display: inline-block;
            position: absolute;
            top:0.75rem;
            right: 0.75rem;
            height:0.6rem ;
        }
    </style>

</head>

<body>
<header>
    <div class="left-btn">
        <img class="back" src="../images/header/back.png" alt="" onclick="history.go(-1)">
    </div>
    <h1 class="">地图示例页面</h1>
    <div class="right-btn">
        <!-- 此处写右边按钮-->
    </div>
</header>
<main>

    <div id="map">

    </div>
    <!--<div id="tip"></div>-->
</main>
<footer style="display: none">
    <h1>人民调解组织</h1>
    <p>机构地址：嘉陵小乡镇信息经济开发区3栋12号</p>
    <div id="go">
        <button>到机构去</button>
    </div>
    <img src="../images/map/right.png" alt="">
</footer>

<script src="../lib/jquery-3.2.1.min.js"></script>
<script src="../lib/swiper/js/swiper.jquery.min.js"></script>
<script src="../lib/template-web.js"></script>
<script src="../lib/fastclick.js"></script>
<script src="../lib/layer.js"></script>
<script src="../js/common.js"></script>

<script>
    $(function () {
        FastClick.attach(document.body);
    });


    function render(data) {

    }
</script>


<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=c46c391ec1e543a6cd5681e2bd3511e4"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

<script type="text/javascript">
    /***************************************
     由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
     ***************************************/
    var map, geolocation,address,markers=[];
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 10
    });
    map.plugin(['AMap.Geolocation','AMap.Scale'], function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(14, 130),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        map.addControl(new AMap.Scale());
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });


    //解析定位结果
    function onComplete(data) {
        address=data.formattedAddress;
        var str=['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        str.push('地址：' + data.formattedAddress);
        if(data.accuracy){
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
//        document.getElementById('tip').innerHTML = str.join('<br>');
    }
    //解析定位错误信息
    function onError(data) {
        tools.layerMsg('定位失败');
    }
    function addMarker(x,y,title,site,phone) {
        // map.clearMap();
        var marker = new AMap.Marker({
            map: map,
            position: [x, y],
//            icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
            icon: new AMap.Icon({
                image:'../images/map/ll.png',
                size:new AMap.Size(52, 52),
            }),

    });
        marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
            offset: new AMap.Pixel(42, 30),//修改label相对于maker的位置
            content: title
        });
        markers.push(marker);
        //实例化信息窗体
        content = [];
        content.push("地址：我来组成地址"+site);
        content.push("联系电话："+phone);
        AMap.plugin('AMap.AdvancedInfoWindow', function () {
            var infoWindow = new AMap.InfoWindow({
                // isCustom: true,  //使用自定义窗体
                content: createInfoWindow(title, content.join("<br/>")),
                offset: new AMap.Pixel(20, -25),
                closeWhenClickMap:true,
                placeSearch:false,
                asOrigin:false
            });

            //鼠标点击marker弹出自定义的信息窗体
            AMap.event.addListener(marker, 'click', function() {
                infoWindow.open(map, marker.getPosition());
                $('footer h1').text(title)
                $('footer p').text('地址：'+site)
                $('footer button').on('click',function () {
                    layer.open({
                        content: '即将打开地图应用'
                        ,btn: ['确认', '取消']
                        ,yes: function(index){
                            marker.markOnAMAP({
                                name:title,
                                position:marker.getPosition()
                            })
                        }
                    });
                });
                $('footer').slideDown();
                $('#map').css({'height':'calc(100vh - 8.7rem)'})
            });

            AMap.event.addListener(infoWindow,'close',function () {
                $('footer button').off('click');
                $('footer').slideUp();
                $('#map').css({'height':'calc(100vh - 2.2rem)'})
            })
        })

    }

    for(var i=0;i<100;i++){
        var lx=Math.random()*(104-104+1)+104;
        var ly=Math.random()*(30-30+1)+30;
        addMarker(lx,ly,'标记'+i,'地址'+i,'15434863485')
    }
    AMap.plugin('AMap.MarkerClusterer',function () {

        var sts = [{
            url: "../images/map/m1.png",
            size: new AMap.Size(52, 52),
            textColor:'#FFF'
        }, {
            url: "../images/map/m2.png",
            size: new AMap.Size(56, 56),
            textColor:'#FFF'
        }, {
            url: "../images/map/m3.png",
            size: new AMap.Size(65, 65),
            textColor:'#FFF'
        },{
            url: "../images/map/m4.png",
            size: new AMap.Size(78, 78),
            textColor:'#FFF'
        },{
            url: "../images/map/m5.png",
            size: new AMap.Size(90, 90),
            textColor:'#FFF'
        }];
        cluster = new AMap.MarkerClusterer(map, markers, {
            styles: sts,
            gridSize:80
        });
//        new AMap.MarkerClusterer(map, markers,{gridSize:80});
    });

    //构建自定义信息窗体
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "info";

        var top = document.createElement("div");
        var titleD = document.createElement("div");
        top.className = "info-top";
        titleD.innerHTML = title;

        top.appendChild(titleD);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        info.appendChild(bottom);
        return info;
    }

</script>

</body>

</html>